import { createRouter, createWebHistory } from "vue-router";

import loginCheck from "@/middlewares/loginCheck";

// import Home from '@/views/Home/index.vue'
const Home = () => import("@/views/Home/index.vue");
const Login = () => import("@/views/Login.vue");
const NotFound = () => import("@/views/NotFound.vue");
const GoodsDetail = () => import("@/views/GoodsDetail.vue");
const Demos = () => import("@/views/demos/index.vue");
const PopoverDemo = () => import("@/views/demos/PopoverDemo.vue");
const DialogDemo = () => import("@/views/demos/DialogDemo.vue");
const About = () =>
    import(/* webpackChunkName: "about" */ "../views/AboutView.vue");

const routes = [
    {
        path: "/",
        name: "home",
        component: Home,
        alias: "/index",
        meta: { loginRequired: false, transition: "slide-left" },
    },

    { path: "/home", redirect: "/" },

    {
        path: "/about",
        name: "about",
        component: About,
    },

    {
        path: "/login",
        name: "login",
        component: Login,
    },

    {
        path: "/goods/:gid(\\d+)",
        name: "goodsDetail",
        component: GoodsDetail,
        meta: { loginRequired: true },
    },

    {
        path: "/demos",
        component: Demos,
        children: [
            {
                path: "popover",
                component: PopoverDemo,
            },
            {
                path: "dialog",
                component: DialogDemo,
            },
        ],
    },

    {
        path: "/:path(.*)*",
        name: "notfound",
        component: NotFound,
    },
];

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes,
});

router.beforeEach((to, from, next) => {
    if (to.meta.loginRequired) {
        if (!loginCheck()) {
            next({ name: "login" });
        } else {
            next();
        }
    } else {
        next();
    }
});

export default router;
